<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box1">
      <span style="display: none">GGGGG</span>
      <span><img src="" alt="11" /></span>
      <script>
        /* 
                在DOM中,网页中所有的文本内容都是文本节点对象
                    可以通过元素来获取其中的文本节点对象,但是我们通常不会这么做
                
                    我们可以直接通过元素去修改其中的文本
                        修改文本的三个属性
                            element.textContent 获取或修改元素中的文本内容
                                - 获取的是标签中的内容,不会考虑CSS格式
                            element.innerText 获取或修改元素中的文本内容
                                - innerText获取内容时,会考虑css格式
                                - 通过innerText去读取CSS样式,会触发网页的重排(计算CSS样式)
                                - 当字符串中有标签的时,会自动对标签进行转义
                                - <li> ->&lt;lt&gt;
                            element.innerHTML 获取或修改元素中的html代码
                                - 可以直接向元素中添加HTML代码
                                - innerHTML插入内容时,有被xss注入的风险
                                - 被用户直接修改成网站地址
                            insertAdjacentElement()可以向元素的任意位置添加元素
                                两个参数,1要添加的位置,2要添加的元素
                                beforeend 标签的最后 afterbegin 标签的开始
                                beforebegin 在元素前面插入兄弟元素 afterend 在元素的后面插入兄弟元素
                            Node.append()方法方法将一个或者多个(可以加入字符串)节点附加到指定父节点的子节点列表的末尾处
                                如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。


            */

        const box1 = document.getElementById('box1');
        let result = (box1.textContent = 'GGG');
        console.log(result);
        result = box1.textContent = 'GGGGGG';
        console.log(result);
      </script>
    </div>
  </body>
</html>
